<template>
  <div class="wallpaper-manager">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <blockquote class="text-warning" style="font-size: 14px">

          <h2 class="text-danger">
            欢迎登录{{ title }}
          </h2>
          <h3>
            当前时间：{{ nowTime }}
          </h3>
        </blockquote>

        <hr />
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-title">总壁纸数</div>
            <div class="card-value">{{ totalWallpapers }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-title">今日新增</div>
            <div class="card-value">{{ newToday }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-title">热门壁纸</div>
            <div class="card-value">{{ hotWallpapers }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-title">用户量</div>
            <div class="card-value">{{ totalUser }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
       <UserPostingECharts />
      </el-col>
    </el-row>

     </div>
</template>

<script setup>
import { ref, onMounted,onBeforeUnmount  } from 'vue';
import UserPostingECharts from "@/views/home/components/UserPostingECharts.vue";

const title = ref(import.meta.env.VITE_APP_TITLE);
const totalWallpapers = ref(0);
const newToday = ref(0);
const hotWallpapers = ref(0);
const totalUser = ref(0);

const fetchStatistics = async () => {
  try {
    totalWallpapers.value = 2333;
    newToday.value = 100;
    hotWallpapers.value =50;
    totalUser.value = 100;
  } catch (error) {
    console.error('Error fetching statistics:', error);
  }
};

/**
 * 显示实时时间
 */

const nowTime = ref('')
/**
 * 将小于10的数字前面补0
 * @function
 * @param {number} value
 * @returns {string} 返回补0后的字符串
 */
const complement = (value) => {
  return value < 10 ? `0${value}` : value.toString()
}
/**
 * 格式化时间为XXXX年XX月XX日XX时XX分XX秒
 * @function
 * @returns {string} 返回格式化后的时间
 */
const formateDate = () => {
  const time = new Date()
  const year = time.getFullYear()
  const month = complement(time.getMonth() + 1)
  const day = complement(time.getDate())
  const hour = complement(time.getHours())
  const minute = complement(time.getMinutes())
  const second = complement(time.getSeconds())
  const week = '星期' + '日一二三四五六'.charAt(time.getDay());
  return `${year}年${month}月${day}日 ${hour}:${minute}:${second}`
}
let timer = 0
/**
 * 设置定时器
 */
onMounted(() => {
  timer = setInterval(() => {
    nowTime.value = formateDate()
  }, 1000)
})
/**
 * 取消定时器
 */
onBeforeUnmount(() => {
  clearInterval(timer) //清除定时器
  timer = 0
})

onMounted(() => {
  fetchStatistics();

});
</script>

<style scoped lang="scss">
.wallpaper-manager {
  padding: 20px;
}

.card-content {
  text-align: center;
}

.card-title {
  font-size: 18px;
  margin-bottom: 10px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
}

.image {
  width: 100%;
  display: block;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.time {
  font-size: 12px;
  color: #999;
}
</style>
